<template>
  <!-- 待办表单容器 -->
  <div class="todo-form">
    <!-- 表单标题 -->
    <h3>添加待办</h3>
    <!-- 名称输入项 -->
    <div class="form-item">
      <!-- 名称标签 -->
      <label>名称：</label>
      <!-- 名称输入框，使用 v-model 指令绑定表单数据的 title 属性 -->
      <el-input 
        v-model="form.title" 
        placeholder="输入待办标题（必填）" 
        class="input"
      />
    </div>
    <!-- 开始时间选择项 -->
    <div class="form-item">
      <!-- 开始时间标签 -->
      <label>开始时间：</label>
      <!-- 日期时间选择器，使用 v-model 指令绑定表单数据的 start 属性 -->
      <el-date-picker
        v-model="form.start"
        type="datetime"
        placeholder="选择开始时间"
        value-format="YYYY-MM-DD HH:mm"
        class="picker"
      />
    </div>
    <!-- 截至时间选择项 -->
    <div class="form-item">
      <!-- 截至时间标签 -->
      <label>截至时间：</label>
      <!-- 日期时间选择器，使用 v-model 指令绑定表单数据的 end 属性 -->
      <el-date-picker
        v-model="form.end"
        type="datetime"
        placeholder="选择截至时间"
        value-format="YYYY-MM-DD HH:mm"
        class="picker"
      />
    </div>
    <!-- 内容输入项 -->
    <div class="form-item">
      <!-- 内容标签 -->
      <label>内容：</label>
      <!-- 文本域输入框，使用 v-model 指令绑定表单数据的 content 属性 -->
      <el-input 
        type="textarea" 
        v-model="form.content" 
        placeholder="输入待办详细描述" 
        class="textarea"
      />
    </div>
    <!-- 地点输入项 -->
    <div class="form-item">
      <!-- 地点标签 -->
      <label>地点：</label>
      <!-- 地点输入框，使用 v-model 指令绑定表单数据的 location 属性 -->
      <el-input 
        v-model="form.location" 
        placeholder="输入执行地点" 
        class="input"
      />
    </div>
    <!-- 提交按钮 -->
    <div class="form-item">
      <el-button 
        type="primary" 
        @click="handleSubmit"
      >
        提交待办
      </el-button>
    </div>
    <!-- 错误提示 -->
    <div class="error" v-if="error">名称不能为空！</div>
  </div>
</template>

<script setup>
// 从 vue 库中导入 ref 函数，用于创建响应式数据
import { ref } from 'vue'
// 从 element-plus 库中导入 ElMessage、ElInput、ElDatePicker 和 ElButton 组件
import { ElMessage, ElInput, ElDatePicker, ElButton } from 'element-plus'
// 导入待办事项的状态管理仓库
import { useTodoStore } from '../store/to-do.js'

// 手动引入组件（防止自动引入失效）
import 'element-plus/es/components/input/style/css'
import 'element-plus/es/components/date-picker/style/css'
import 'element-plus/es/components/button/style/css'

// 获取待办事项的状态管理仓库实例
const store = useTodoStore()
// 创建一个响应式的表单数据对象
const form = ref({
  title: '',
  start: '',
  end: '',
  content: '',
  location: ''
})
// 创建一个响应式的错误标志
const error = ref(false)

// 处理表单提交的函数
const handleSubmit = () => {
  // 检查名称是否为空
  if (!form.value.title.trim()) {
    // 如果为空，设置错误标志为 true
    error.value = true
    return
  }
  // 如果名称不为空，设置错误标志为 false
  error.value = false
  
  // 调用仓库的 addTodo 方法添加新的待办事项
  store.addTodo({
    title: form.value.title,
    start: form.value.start,
    end: form.value.end,
    content: form.value.content,
    location: form.value.location,
    done: false
  })
  
  // 显示成功提示信息
  ElMessage.success('待办添加成功！')
  // 清空表单数据
  form.value = {
    title: '',
    start: '',
    end: '',
    content: '',
    location: ''
  }
}
</script>

<style scoped>
.todo-form {
  /* 背景颜色为白色 */
  background: #fff;
  /* 内边距为 20px */
  padding: 20px;
  /* 圆角半径为 8px */
  border-radius: 8px;
  /* 下外边距为 20px */
  margin-bottom: 20px;
}
.form-item {
  /* 下外边距为 15px */
  margin-bottom: 15px;
  /* 使用 flex 布局，垂直排列子元素 */
  display: flex;
  flex-direction: column;
}
.label {
  /* 下外边距为 5px */
  margin-bottom: 5px;
  /* 字体加粗 */
  font-weight: bold;
}
.input, .textarea, .picker {
  /* 宽度为 100% */
  width: 100%;
  /* 上外边距为 5px */
  margin-top: 5px;
}
.error {
  /* 字体颜色为红色 */
  color: #f56c6c;
  /* 上外边距为 10px */
  margin-top: 10px;
}
</style>